<template>
  <view>
   <u-tabs :list="tabs" @click="click"></u-tabs>
   <view class="" v-if="list.length">
      <view class="" v-show="params.status === 1">
        <view class="p32" v-for="(item, index) in list" :key="item.id" >
          <navigator class="" :url="'/pages/orders/detail?id=' + item.id">
            <view class="flex" v-for="good in item.orderDetails.data" :key="good.id" v-if="item.orderDetails.data && item.orderDetails.data.length === 1">
              <view class="">
                <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
              </view>
              <view class="flex flex-col carts-right">
                <view class="">
                  <view class="">{{good.goods.title}}</view>
                </view>
                <view class="flex items-center">
                  <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                  <view class="">x{{good.num}}</view>
                </view>
              </view>
            </view>
            <scroll-view :scroll-x="true" v-if="item.orderDetails.data.length > 1">
              <view class="flex flex-nowrap">
                <view class="" v-for="good in item.orderDetails.data" :key="good.id">
                  <view class="">
                    <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
                  </view>
                  <view class="flex flex-col carts-right">
                    <view class="">
                      <view class="">{{good.goods.title}}</view>
                    </view>
                    <view class="flex items-center">
                      <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                      <view class="">x{{good.num}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </navigator>
          <view class="btn-pay">去支付</view>
        </view>
      </view>
      <view class="" v-show="params.status === 2">
        <navigator class="flex p32" v-for="(item, index) in list" :key="item.id" :url="'/pages/orders/detail?id=' + item.id">
          <view class="" v-for="good in item.orderDetails.data" :key="good.id">
            <view class="">
              <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
            </view>
            <view class="flex flex-col carts-right">
              <view class="">
                <view class="">{{good.goods.title}}</view>
              </view>
              <view class="flex items-center">
                <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                <view class="">x{{good.num}}</view>
              </view>
            </view>
          </view>
        </navigator>
      </view>
      <view class="" v-show="params.status === 3">
        <view class="p32" v-for="(item, index) in list" :key="item.id" >
          <navigator class="flex p32" :url="'/pages/orders/detail?id=' + item.id">
            <view class="" v-for="good in item.orderDetails.data" :key="good.id">
              <view class="">
                <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
              </view>
              <view class="flex flex-col carts-right">
                <view class="">
                  <view class="">{{good.goods.title}}</view>
                </view>
                <view class="flex items-center">
                  <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                  <view class="">x{{good.num}}</view>
                </view>
              </view>
            </view>
          </navigator>
           <view class="btn-confirm">确认收货</view>
        </view>
      </view>
      <view class="" v-show="params.status === 4">
        <view class="p32" v-for="(item, index) in list" :key="item.id" >
          <navigator class="flex p32" v-for="(item, index) in list" :key="item.id" :url="'/pages/orders/detail?id=' + item.id">
            <view class="" v-for="good in item.orderDetails.data" :key="good.id">
              <view class="">
                <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
              </view>
              <view class="flex flex-col carts-right">
                <view class="">
                  <view class="">{{good.goods.title}}</view>
                </view>
                <view class="flex items-center">
                  <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                  <view class="">x{{good.num}}</view>
                </view>
              </view>
            </view>
          </navigator>
          <view class="btn-evaluate">去评价</view>
        </view>
      </view>
      <view class="" v-show="params.status === 5">
        <navigator class="flex p32" v-for="(item, index) in list" :key="item.id" :url="'/pages/orders/detail?id=' + item.id">
          <view class="" v-for="good in item.orderDetails.data" :key="good.id">
            <view class="">
              <image :src="good.goods.cover_url" mode="aspectFill" style="width: 230rpx;height: 200rpx;"></image>
            </view>
            <view class="flex flex-col carts-right">
              <view class="">
                <view class="">{{good.goods.title}}</view>
              </view>
              <view class="flex items-center">
                <view class="color-f00 mr12">￥{{good.goods.price}}</view>
                <view class="">x{{good.num}}</view>
              </view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <view>
      <u-empty
        v-show="!list.length"
        mode="list"
        text="列表为空"
        icon="http://cdn.uviewui.com/uview/empty/list.png">
    </u-empty>
    </view>
  </view>
</template>

<script>
import { ordersList } from '@/config/api'
export default {
  data() {
   return {
     list: [],
     tabs: [{
        name: '待付款',
      }, {
        name: '已支付',
      }, {
        name: '待收货'
      }, {
        name: '已完成'
      }, {
        name: '已取消'
      }],
    params: {
      page: 1,
      status: 1,
      include: 'orderDetails.goods'
    }
   }
  //  订单状态: 1下单 2支付 3发货 4收货 5过期
  },
  onLoad() {
    this.getData()
  },
  methods: {
    click(item) {
      if(this.params.status === item.index + 1) return;
      this.params.status = item.index + 1
      this.getData()
    },
    async getData() {
      const res = await ordersList({params: this.params})
      this.list = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.carts-right {
	height: 200rpx;
	justify-content: space-around;
}
</style>
